<template>
<!--pages/article/lanmu/lanmu.wxml-->
<view>
  <view class="lanmus" v-if="lanmuLsit!=''">
    <view style="margin: 0 35rpx;border-bottom: 1px solid #e8e8e8;">
      <scroll-view scroll-x="true" scroll-with-animation="true">
        <block>
          <view class="blockbox">
            <view v-for="(item, index) in lanmuLsit" :key="index" @tap="lanmuClick" class="lanmu-list" :data-id="item.id" :data-classname="item.classname" :data-index="index">
              <text :class="item.checked?'lanmutext':'noseltext'">#{{item.classname}}#</text>
            </view>
          </view>
        </block>
      </scroll-view>
    </view>
  </view>

  <view :style="'padding-top:' + lanmuHeight + 'px'">
    <!-- 文章列表 -->
    <navigator v-for="(item, index) in classlist" :key="index" class="content" :url="'/pages/article/detail/detail?id=' + item.id + '&type=' + item.pagetype + '&city=' + citycode" hover-class="none">
      <view class="title">
        <text>{{item.title}}</text>
        <view class="zuan-time">
          <view class="time">{{item.publictime}}</view>
        </view>
      </view>
      <image :src="item.images" v-if="item.images" mode="aspectFill"></image>
    </navigator>
    <!-- <view v-if="classlist.length>=1">
				<uni-load-more :status="requestStatus"></uni-load-more>
			</view> -->

    <!-- null-->
    <view>
      <image src="http://imgbdb3.bendibao.com/xcx/202011/13/20201113154945_55324.gif" mode style="width: 100%;" v-if="showLoading"></image>
      <view class="null-box" v-if="classlist==''&& shownull">
        <image src="http://imgbdb3.bendibao.com/xcx/202011/13/20201113155035_59183.png"></image>
        <view class="texts">抱歉，暂未开通
          <text style="color:#f60">{{classname}}</text> 相关栏目。</view>
        <view class="texts">建议您先查看其它栏目内容！</view>
      </view>
    </view>

  </view>
</view>
</template>

<script>
// pages/article/lanmu/lanmu.js
const app = getApp();
const util = require("../../../utils/util.js");
var page = 1;

export default {
  data() {
    return {
      lanmuHeight: 0,
      classlist: [],
      // 栏目文章列表
      lanmuLsit: [],
      // 子栏目
      bannerlist: [],
      // 轮播图列表
      showLoading: false,
      shownull: false,
      classname: "",
      id: "",
      type: "",
      citycode: "",
      city: "",
      classid: ""
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      id: options.id ? options.id : '',
      type: options.type ? options.type : '',
      citycode: options.city ? options.city : uni.getStorageSync("citycode") ? uni.getStorageSync("citycode") : 'sz' // name: options.name ? decodeURIComponent(options.name):""

    });
    util.getUrl(app.globalData.url).then(res => {
      util.cityList().then(res => {
        let citydata = res.allcity.filter(v => v.citycode == this.citycode);
        this.setData({
          city: citydata[0].cityname
        });
        this.setData({
          showLoading: true
        });
        this.getclassList();
        this.getclassInfo(this.id, page);
        this.getlanmuList(this.id);
      });
    });
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    page++; // this.requestStatus = "loading";

    this.getclassInfo(this.id, page);
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    // 获取单个栏目信息
    getclassList() {
      let data = {
        citycode: this.type == 'wenda' ? 'wenda' : this.type == 'bsy' && this.citycode == 'sz' ? 'bsy' : this.citycode,
        action: 'classinfo',
        classid: this.id
      };
      util.request('index.php', data, 'GET').then(res => {
        this.setData({
          classname: res.data.classname
        }); // this.classname = res.data.classname;

        uni.setNavigationBarTitle({
          title: res.data.classname
        });
      });
    },

    // 获取单一栏目详情列表接口
    getclassInfo(classid, page) {
      let infoData = {
        citycode: this.type == 'wenda' ? 'wenda' : this.type == 'bsy' && this.citycode == 'sz' ? 'bsy' : this.citycode,
        action: 'list',
        city: this.city,
        pagesize: 15,
        classid,
        page // timestamp: new Date().getTime(),

      };
      util.request('index.php', infoData, 'GET').then(res => {
        // if (res.data == "") {
        //   this.requestStatus = "noMore";
        // }
        this.setData({
          classlist: this.classlist.concat(res.data)
        });
        this.setData({
          showLoading: false
        });

        if (this.classlist == "") {
          this.setData({
            shownull: true
          });
        } // this.classlist = this.classlist.concat(res.data);
        // if (this.classlist.length < 15) {
        //   this.requestStatus = "noMore";
        // }

      });
    },

    // 获取栏目列表
    getlanmuList(classid) {
      let lanmuData = {
        action: "classlist",
        citycode: this.type == 'wenda' ? 'wenda' : this.type == 'bsy' && this.citycode == 'sz' ? 'bsy' : this.citycode,
        // siteid:162
        classid
      };
      util.request('index.php', lanmuData, 'GET').then(res => {
        if (res.data) {
          res.data.forEach((v, k) => {
            v.checked = false;
          });
          this.setData({
            lanmuLsit: res.data
          });
          var query = uni.createSelectorQuery();
          query.select('.lanmus').boundingClientRect(res => {
            this.setData({
              lanmuHeight: res != null ? res.height : 0
            });
          }).exec();
        }
      });
    },

    // 栏目点击
    lanmuClick(e) {
      // this.lanmuIndex = index;
      let id = e.currentTarget.dataset.id;
      let classname = e.currentTarget.dataset.classname;
      let index = e.currentTarget.dataset.index;
      this.lanmuLsit.forEach((v, k) => {
        if (index == k) {
          v.checked = true;
        } else {
          v.checked = false;
        }
      });
      this.setData({
        lanmuLsit: this.lanmuLsit,
        classlist: [],
        classid: id,
        id,
        classname: classname,
        showLoading: true,
        shownull: false
      });
      this.getclassInfo(id, 1);
    }

  }
};
</script>
<style>
/* pages/article/lanmu/lanmu.wxss */

.content {
  border-bottom: 1rpx solid #e8e8e8;
  padding: 20rpx 0;
  display: flex;
  align-items: center;
  margin: 10rpx 30rpx 0 30rpx;
}

.content .title {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1;
}

.content text {
  font-size: 34rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}

.content image {
  width: 188rpx;
  height: 120rpx;
  border-radius: 4rpx;
  margin-left: 20rpx;
}

.time {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  margin-top: 15rpx;
}

.zuan-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15rpx;
  width: 100%;
}

.zuanti {
  border: 2rpx solid rgba(255, 102, 0, 1);
  opacity: 1;
  border-radius: 16rpx;
  font-size: 18rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(255, 102, 0, 1);
  padding: 5rpx 12rpx;
}

.gongju-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 30rpx;
}

.gongju {
  background: rgba(242, 242, 242, 1);
  opacity: 1;
  border-radius: 6rpx;
  padding: 15rpx 25rpx;
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #888;
  margin-right: 22rpx;
  margin-top: 16rpx;
  text-align: center;
}

/* .gongju:nth-child(4n){margin-right: 0;} */

.swiper_list {
  position: relative;
  height: 330rpx;
}

.swiper_list image {
  height: 100%;
  width: 100%;
  border-radius: 20rpx;
}

.swiper_list .imgtext {
  background: rgba(0, 0, 0, 0.41);
  padding: 10rpx 20rpx;
  width: 94.5%;
  font-size: 28rpx;
  color: #fff;
  position: absolute;
  bottom: 0;
  border-radius: 0rpx 0rpx 20rpx 20rpx;
}

.swimg {
  width: 100%;
  height: 330rpx;
  border-radius: 10rpx;
  position: relative;
}

.imgtext {
  background: rgba(0, 0, 0, 0.41);
  padding: 10rpx 20rpx;
  width: 95%;
  font-size: 28rpx;
  color: #fff;
  position: absolute;
  bottom: 50;
  border-radius: 0rpx 0rpx 10rpx 10rpx;
}

.null-box {
  text-align: center;
  margin-top: 262rpx;
}

.null-box image {
  width: 422rpx;
  height: 268rpx;
}

.texts {
  font-size: 28rpx;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 500;
  text-align: center;
  color: #a7a6a6;
  margin-top: 26rpx;
}

.lanmus {
  position: fixed;
  top: 0;/*  #ifdef  H5  */
  top: calc(88rpx + constant(safe-area-inset-top));
  top: calc(88rpx + env(safe-area-inset-top));/*  #endif  */
  width: 100%;
  background-color: #fff;
  z-index: 1;
}

.lanmu-list {
  margin-right: 20rpx;
  padding: 15rpx 0;
}

.lanmutext {
  font-size: 30rpx;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 500;
  color: #f60;
}

.blockbox {
  white-space: nowrap;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
}

.noseltext {
  font-size: 30rpx;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 500;
  color: #828282;
  margin-bottom: 22rpx;
}

</style>